<template>
  <div>
    <!--查询条件-->
    <el-form :inline="true" :model="tbAlbum" class="demo-form-inline">
      <el-form-item label="相册名称:">
        <el-input
          v-model="tbAlbum.title"
          placeholder="请输入相册名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="addBrand">新增</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="相册编号" width="200" prop="id">
      </el-table-column>
      <el-table-column label="相册名称" width="280" prop="title">
      </el-table-column>
      <el-table-column label="相册封面" width="280">
        <template v-slot="slot">
          <el-image
            style="width: 100px; height: 100px"
            :src="slot.row.image"
            fit="contain"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="seeAlumImageItems(scope.row.id)"
            >查看</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页插件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 40, 80]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
    >
    </el-pagination>

    <!--编辑操作区（对话框组件）-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <span>
        <el-form label-position="right" label-width="80px" :model="albumInfo">
          <el-form-item label="相册名称">
            <el-input v-model="albumInfo.title"></el-input>
          </el-form-item>
          <el-form-item label="相册封面">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:88/api/oss"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 页大小
      pageSize: 10,
      // 页号
      currentPage: 1,
      // 总数
      totals: 0,
      // 查询信息封装
      tbAlbum: {},
      // 对话框组件提示信息
      title: "新增操作",
      // 是否弹出对话框
      dialogVisible: false,
      // 封装新增或修改信息
      albumInfo: {},
      // 图片路径
      imageUrl: ""
    };
  },
  methods: {
    // 查询brand对象
    async getAlbumList() {
      const { data: res } = await this.$http.post(
        `vi/goods/album/pageQueryByAll/${this.currentPage}/${this.pageSize}`,
        this.tbAlbum
      );
      this.tableData = res.data.pageUtils.rows;
      this.totals = res.data.pageUtils.total;
    },
    // 编辑操作
    handleEdit(row) {
      this.title = "编辑操作";
      this.albumInfo = row;
      this.imageUrl = this.albumInfo.image;
      this.dialogVisible = true;
    },
    // 删除操作
    handleDelete(row) {
      this.$confirm("此操作将永久删除该相册, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const { data: res } = await this.$http.delete(
            `vi/goods/album/delete/${row.id}`
          );
          if (res.success === true) {
            this.$message({
              type: "success",
              message: res.message
            });
          } else {
            this.$message({
              type: "info",
              message: res.message
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      this.getAlbumList();
    },
    // 页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAlbumList();
    },
    // 页号改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAlbumList();
    },
    // 按条件查询
    onSubmit() {
      this.currentPage = 1;
      this.getAlbumList();
    },
    // 跳转到album_list
    seeAlumImageItems(id) {
      this.$router.push({
        // 核心语句
        path: "/home/albumList", // 跳转的路径
        query: {
          // 路由传参时push和query搭配使用 ，作用时传递参数
          id: id
        }
      });
    },
    // 是否关闭对话框
    handleClose(done) {
     this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    // 新增操作
    addBrand() {
      this.title = "新增操作";
      this.albumInfo = {};
      this.dialogVisible = true;
    },
    // 新增或者修改操作
    async determine() {
      this.albumInfo.image = this.imageUrl;
      if(this.albumInfo.id == null){
        const { data: res } = await this.$http.post(
          `vi/goods/album/add`,
          this.albumInfo
        );
        if (res.success === true) {
        this.$message({
          type: "success",
          message: res.message
        });
        } else {
          this.$message({
            type: "info",
            message: res.message
          });
        }
        this.dialogVisible = false;
        this.getAlbumList();
      }else{
          const { data: res } = await this.$http.put(
            `vi/goods/album/update`,
            this.albumInfo
          );
          if (res.success === true) {
          this.$message({
            type: "success",
            message: res.message
          });
          } else {
            this.$message({
              type: "info",
              message: res.message
            });
          }
          this.dialogVisible = false;
          this.getAlbumList();
      }
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = file.response;
    },
    // 上传之前的回调
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!(isJPG || isPng)) {
        this.$message.error("上传图片只能是JPG或者PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB!");
      }
      return (isJPG || isPng) && isLt2M;
    }
  },
  created() {
    this.getAlbumList();
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
